<!--  -->
<template>
  <div>
    <header class="top">
      <div class="top__l">
        <h2>叩丁狼电商运营平台</h2>
        <el-icon color="#fff" size="22px" @click="changeMenu"><Menu /></el-icon>
      </div>
      <el-dropdown>
        <span class="top__dropdown">
          {{ username }}
          <el-icon color="#fff">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/home')"
              >首页</el-dropdown-item
            >
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </header>
    <div class="contentBox">
      <div class="menu">
        <el-menu
          :collapse="isCollapse"
          text-color="#fff"
          background-color="#304156"
          class="el-menu-vertical-demo"
          :router="true"
          :unique-opened="true"
        >
          <el-menu-item index="/home">
            <i class="iconfont homepage"></i>
            <template #title><span class="oneTitle">首页</span></template>
          </el-menu-item>
          <el-sub-menu
            :index="String(item.id)"
            v-for="item in menusList"
            :key="item.id"
          >
            <template #title>
              <i class="iconfont" :class="item.icon"></i>
              <span class="oneTitle">{{ item.title }}</span>
            </template>
            <template v-for="citem in item.children" :key="citem.id">
              <el-menu-item
                :index="'/' + item.name + '/' + citem.name"
                v-if="!citem.hidden"
              >
                <i class="iconfont" :class="citem.icon"></i>{{ citem.title }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="content">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, index) in allPathName"
              :key="index"
              >{{ item.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="content__table">
          <Suspense>
            <router-view></router-view>
            <template #fallback> 正在加载...... </template>
          </Suspense>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, computed } from "vue";
import { useUserStore } from "@/store/modules/user";
import * as http from "@/request";
import Cookies from "js-cookie";
import { useRoute, useRouter } from "vue-router";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const menusList = computed(() => userStore.getMenusConf);
const username = computed(() => userStore.username);
const isCollapse = ref(true);
interface IPathName {
  [index: string]: string;
}
const allPathName = computed(() => {
  let PathName: IPathName[] = [];
  const getBackPath = (curChildren: Menus[] | undefined) => {
    // console.log(curChildren);

    if (!curChildren || curChildren!.length === 0) return "";
    // console.log(curChildren);
    for (const item of curChildren!) {
      // console.log(item);
      if (item.hidden === 0) {
        // console.log(item);
        // 拿到不隐藏的第一个作为重定向的地址
        return "/" + item.name;
      }
    }
    // 子元素都是隐藏的情况下返回 空字符串
    return "";
  };
  const getChildren = (
    children: Menus[],
    curIndex: number,
    Prename: string
  ) => {
    curIndex += 1;
    for (const citem of children) {
      if (citem.name === route.matched[curIndex].name) {
        PathName[curIndex] = {};
        PathName[curIndex]["name"] = citem.name;
        PathName[curIndex]["title"] = citem.title;
        PathName[curIndex]["path"] = Prename + getBackPath(citem.children);
        if (!citem.children || citem.children!.length === 0) return;
        getChildren(citem.children, curIndex, PathName[curIndex]["path"]);
        break;
      }
    }
  };
  for (const item of Object.values(menusList.value)) {
    let curIndex = 0;
    if (item.name === route.matched[curIndex].name) {
      PathName[curIndex] = {};
      PathName[curIndex]["name"] = item.name;
      PathName[curIndex]["title"] = item.title;
      if (!item.children || item.children!.length === 0) return;
      PathName[curIndex]["path"] = "/" + item.name + getBackPath(item.children);
      getChildren(item.children, curIndex, PathName[curIndex]["path"]);
      break;
    }
  }
  // console.log(PathName);

  return PathName;
});

const changeMenu = () => {
  isCollapse.value = !isCollapse.value;
};
const logout = async () => {
  let res = await http.adminLogout();
  if (res.code === 200) {
    Cookies.remove("token");
    router.go(0);
  }
};
</script>
<style lang="scss" scoped>
.top {
  &__l {
    @include flexBox();
    height: 100%;
    h2 {
      font-size: 24px;
      color: #fff;
      padding-right: 20px;
    }
  }
  &__dropdown {
    color: #fff;
  }
  height: 70px;
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  :deep(.el-dropdown) {
    cursor: pointer;
  }
}
.contentBox {
  display: flex;
}
.content {
  width: 100%;
  min-width: calc(100vw - 250px);
  display: flex;
  flex-direction: column;
  &__table {
    width: 100%;
    height: calc(100vh - 114px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
.breadcrumb {
  padding: 15px 20px;
  box-sizing: border-box;
  // 加边框同时下边距调为-1,给边框留出位置, 防止纵向超出
  border-bottom: 1px solid #eee;
  margin-bottom: -1px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  height: calc(100vh - 70px);
  overflow: auto;
  background-color: #304156;
  &::-webkit-scrollbar {
    width: 0;
  }
}
.el-menu--collapse {
  height: calc(100vh - 70px);
}
</style>
